<template>
  <div>
    <div class="blue-line">
      <h2>申购</h2>
    </div>

    <div class="blue-line" style="margin-top: 3vh; margin-bottom: 2vh">
      <h2 style="font-size: 16px">客户选择</h2>
    </div>

    <h-form :model="user" label-position="top">
      <h-row>
        <h-col span="7">
          <h-form-item label="客户类型" required>
            <h-select
              v-model="user.user_type"
              @on-change="getBankCards"
              placeholder="请选择客户类型"
            >
              <h-option value="1">个人</h-option>
              <h-option value="2">机构</h-option>
            </h-select>
          </h-form-item>
        </h-col>

        <h-col span="7" offset="1">
          <h-form-item label="客户姓名" required>
            <h-input
              v-model="user.name"
              @on-change="getBankCards"
              placeholder="请输入客户姓名"
              style="margin-top: 0vh"
            ></h-input>
          </h-form-item>
        </h-col>

        <h-col span="7" offset="1">
          <h-form-item label="证件类型" required>
            <h-select
              v-model="user.identity_card_type"
              @on-change="getBankCards"
              placeholder="请选择证件类型"
            >
              <h-option value="1">身份证</h-option>
              <h-option value="2">护照</h-option>
              <h-option value="3">军官证</h-option>
              <h-option value="4">其他</h-option>
              <h-option value="警官">警官</h-option>
            </h-select>
          </h-form-item>
        </h-col>
      </h-row>

      <h-row>
        <h-col span="7">
          <h-form-item label="证件号码" required>
            <h-input
              v-model="user.identity_card_id"
              @on-change="getBankCards"
              placeholder="请输入证件号码"
              style="margin-top: 0vh"
            ></h-input>
          </h-form-item>
        </h-col>

        <h-col span="7" offset="1">
          <h-form-item label="银行卡" required>
            <!-- <h-select v-model="user.bank_card_num" @on-change="getBanlance">
          <h-option
            v-for="item in bankCards"
            :value="item.num"
            :key="item.num"
            >{{ item.type + ":" + item.num }}</h-option
          >
        </h-select> -->
            <h-input v-model="user.bank_card_num" style="margin-top: 0vh">
            </h-input>
          </h-form-item>
        </h-col>

        <h-col span="7" offset="1">
          <!-- <h-form-item label="可用余额">
            <h-typefield
              v-model="user.balance"
              type="money"
              placeholder="金额"
              readonly
              style="margin-top: 0vh"
            ></h-typefield>
          </h-form-item> -->
        </h-col>
      </h-row>
    </h-form>
    <h2 style="font-size: 16px; margin-bottom: 2vh" class="blue-line">
      业务选择
    </h2>
    <h-form :model="product" label-position="top">
      <h-row>
        <h-col span="11">
          <h-form-item label="产品选择" required>
            <h-select v-model="code">
              <h-option
                v-for="item in productList"
                :value="item.code"
                :key="item.code"
                >{{ item.name }}</h-option
              >
            </h-select>
          </h-form-item>
        </h-col>
        <h-col span="11" offset="1">
          <h-form-item label="购买金额" required>
            <h-input
              v-model="money"
              placeholder="请输入购买金额"
              style="margin-top: 0vh"
            ></h-input>
          </h-form-item>
        </h-col>
      </h-row>
      <h-row>
        <h-col span="4" offset="10"
          ><h-button type="primary" @click="confirm">提交</h-button></h-col
        >
      </h-row>
    </h-form>
  </div>
</template>
    
<script>
import { userSearch } from "@/api/user";
import { getBalance } from "@/api/bank";
import { productList } from "@/api/product";
import { subscribe } from "@/api/trade";
export default {
  data() {
    return {
      confirmSubscribe: false,
      ACK: "N",
      user: {
        user_type: "",
        name: "",
        identity_card_type: "",
        identity_card_id: "",
        bank_card_num: "",
        balance: "123",
      },
      code: "",
      money: "",
      bankCards: [
        {
          type: "中国银行",
          value: "123",
        },
      ],
      productList: [
        {
          num: "HS-1",
          name: "平安基金",
          risklevel: "R1",
        },
      ],
    };
  },
  mounted() {
    this.getproduct();
  },
  methods: {
    confirm() {
      //TODO 记得加回来check
      // if (this.check()) {
      this.$hMsgBox.confirm({
        title: "确认申购吗？",
        content: "点击确认提交申购信息",
        onOk: () => {
          this.subscribe();
        },
        onCancel: () => {
          this.$hMsgBox.info({
            title: "取消提交",
            content: "您已取消提交",
          });
        },
      });
      // }
    },

    subscribe() {
      //TODO 购买两次
      subscribe({
        identity_card_id: this.user.identity_card_id,
        user_type: this.user.user_type,
        identity_card_type: this.user.identity_card_type,
        bank_card_num: this.user.bank_card_num,
        name: this.user.name,
        code: this.code,
        money: this.money,
        ack: this.ACK,
      })
        .then((res) => {
          console.log(res);
          if (res.data.data == "偏好不满足，操作失败") {
            this.$hMsgBox.confirm({
              title: "偏好不满足，请确认是否购买",
              content: "点击确认购买",
              onOk: () => {
                this.ACK = "Y";
                this.subscribe();
              },
              onCancel: () => {
                this.$hMessage.info("您已取消购买");
              },
            });
          } else {
            this.$hMessage.success("申购成功");
            this.submit();
          }
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("申购失败");
        });
    },

    submit() {
      var currentDate = new Date();
      var year = currentDate.getFullYear();
      var month = currentDate.getMonth() + 1;
      var day = currentDate.getDate();
      var hour = currentDate.getHours();
      var minute = currentDate.getMinutes();
      var second = currentDate.getSeconds();
      var date =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;

      this.$hMsgBox.success({
        //TODO
        title: "申购成功",
        content: `产品代码：${this.code}
                <br>投资人：${this.user.name}
                <br>购买金额：${this.money}
                <br>下单日期：${date}`,
        dangerouslyUseHTMLString: true,
      });
    },

    getproduct() {
      productList({
        page: 0,
        num: 100,
      })
        .then((res) => {
          console.log("productList", res);
          this.productList = res.data.data.content;
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("获取产品失败");
        });
    },

    getBankCards() {
      if (
        this.user.name &&
        this.user.identity_card_id &&
        this.user.user_type &&
        this.user.identity_card_type
      ) {
        userSearch({
          identity_card_id: this.user.identity_card_id,
          user_type: this.user.user_type,
          identity_card_type: this.user.identity_card_type,
          name: this.user.name,
          page: 0,
          num: 1,
        })
          .then((res) => {
            console.log(res);
            this.bankCards = res.data.data.content[0].bankCards;
          })
          .catch((err) => {
            console.log(err);
            // this.$hMessage.error("获取银行卡失败");
          });
      }
    },

    getBanlance() {
      getBalance({
        num: this.user.bank_card_num,
      })
        .then((res) => {
          console.log(res);
          this.balance = res.data.data.balance;
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("获取余额失败");
        });
    },

    check() {
      //检查数据是否填写完整
      if (
        this.user.user_type === undefined ||
        this.user.user_type === "" ||
        this.user.name === undefined ||
        this.user.name === "" ||
        this.user.identity_card_type === undefined ||
        this.user.identity_card_type === "" ||
        this.user.identity_card_id === undefined ||
        this.user.identity_card_id === "" ||
        this.user.bank_card_num === undefined ||
        this.user.bank_card_num === "" ||
        this.code === undefined ||
        this.code === "" ||
        this.money === undefined ||
        this.money === ""
      ) {
        this.$hMessage.warning("请填写完整信息");
        return false;
      }
      if (this.user.balance < this.money) {
        this.$hMessage.warning("余额不足");
        return false;
      }
      return true;
    },
  },
};
</script>
    
<style scoped>
.h-select {
  width: 100%;
}

.blue-line {
  border-left: 3px solid #298dff;
  padding-left: 10px;
}
</style>